<template>
  <div class="test-container">
    <el-input v-model="d"></el-input>
    <el-button @click="doAdd"> add</el-button>
    <el-button @click="doClick"> click</el-button>
    <van-echarts
      :title="title"
      :charts="edata"
      :expand="expand"
      type="pie"
      style="height: 500px"
      ref="chart"
    ></van-echarts>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from 'vue'
import { useStore } from 'vuex'
// import { doEdit } from '@/api/User'

export default defineComponent({
  name: 'Test',
  components: {},
  setup() {
    const store = useStore()
    const doClick = async () => {
      // await doEdit({ a: '1' })
    }
    const d = computed(() => store.state.test.test)
    function doAdd() {
      store.dispatch('test/updateTest', store.state.test.test + 'a')
    }
    const title = ref('降水量')
    const edata = {
      Apple: 335,
      Grapes: 310,
      Pineapples: 234,
      Oranges: 135,
      Bananas: 1548
    }
    const expand = {
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      options: {
        title: {
          left: 'center'
        }
      }
    }
    const option = {
      title: { text: '降水量' },
      xAxis: {
        data: ['6-3', '6-4', '6-5', '6-6', '6-7', '6-8']
      },
      yAxis: {},
      series: [
        {
          name: '降水量',
          type: 'line',
          data: [5, 20, 36, 10, 10, 20]
        }
      ],
      tooltip: {}
    }
    return {
      doClick,
      doAdd,
      d,
      option,
      title,
      edata,
      expand
    }
  }
})
</script>
<style scoped>
.test-container {
  height: 100%;
}
</style>
